<!--
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.
-->

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Realtime API with openai-node SDK</title>
</head>

<body>
  <div id="app">
    <form>
      <div class="container">
        <div id="received-text-container"></div>
        <div class="controls">
          <div class="input-group">
            <label for="endpoint">Endpoint</label>
            <input id="endpoint" type="text" placeholder="Enter resource/endpoint URL" />
            <div class="toggle-group">
              <label for="azure-toggle">Azure OpenAI</label>
              <input id="azure-toggle" type="checkbox" checked />
            </div>
              <label for="api-key">API Key</label>
            <input id="api-key" type="password" placeholder="Enter API key" />
            <label for="deployment-or-model">Deployment</label>
            <input id="deployment-or-model" type="text" placeholder="Enter deployment/model, e.g. gpt-4o-realtime-preview-2024-10-01" />
          </div>
          <div class="input-group">
          <div class="button-group">
            <button id="start-recording" type="button">Record</button>
            <button id="stop-recording" type="button" disabled="true">Stop</button>
          </div>
          <div class="input-group">
            <label for="session-instructions">System Message</label>
            <textarea id="session-instructions" placeholder="Optional instructions for the session, e.g. 'You talk like a pirate.'" rows="4"></textarea>
          </div>
          <div class="input-group">
            <label for="temperature">Temperature</label>
            <input id="temperature" type="number" min="0.6" max="1.2" step="0.05" placeholder="0.6-1.2 (default 0.8)"/>
          </div>
          <div class="input-group">
            <label for="voice">Voice</label>
              <select id="voice">
                <option></option>
                <option>alloy</option>
                <option>ash</option>
                <option>ballad</option>
                <option>coral</option>
                <option>echo</option>
                <option>sage</option>
                <option>shimmer</option>
                <option>verse</option>
              </select>
          </div>
          <div class="button-group">
            <button id="clear-all" type="button">Clear all</button>
          </div>
        </div>
      </div>
    </form>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>